<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props</title>

</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <!-- <input type="text" :value="msg" @input="msg=$event.target.value"> -->
        <div>
            {{msg}}
        </div>
        <div>============</div>
        <my-component v-model="msg2" v-model="msg3"></my-component>
        <div>{{msg2}}</div>
        <div>{{msg3}}</div>


    </div>


    <template id="my-component">
        <!-- <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)">
        <input type="text" :value="abc" @input="$emit('update:abc', $event.target.value)"> -->
        <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" />
        <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
    </template>









    <!-- 引入vue -->
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.1/vue.global.js"></script>
    <script>

        const { createApp, ref, onMounted, nextTick, getCurrentInstance, useTemplateRef } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const msg = ref("hello world")
                const msg2 = ref("hello world2")
                const msg3 = ref("hello world3")
                return {
                    msg,
                    msg2,
                    msg3
                }
            }
        })

        app.component('my-component', {
            props: ['firstName', 'lastName'],
            emits: ['update:firstName', 'update:lastName'],
            template: '#my-component',
        })

        app.component('child-component', {
            template: '#child-component',
            setup() {
                // const model = defineModel()
                return {
                    // model
                }
            }
        })

        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>